<script lang="ts" setup>
import { useFetch } from '@/home/hooks/fetch';
import { useAsyncData } from '@/home/hooks/async-data';
import Pagination from '@/home/components/Pagination.vue';
import LoadingBox from '@/home/components/LoadingBox.vue';
import Loading from '@/home/components/Loading.vue';

const props = defineProps({
  page: {
    type: String,
    default: '',
  },
});

const PAGE_SIZE = 10;

const { $fetch } = useFetch();
const { data: listing, refresh, pending } = useAsyncData(
  'explore:developer',
  () => $fetch('/developer/recommend_list', {
    method: 'post',
    data: {
      pageNum: Number(props.page) || 1,
      pageSize: PAGE_SIZE,
    },
  }),
  {
    cache: false,
    watch: [() => props.page],
  },
);

const changeFocus = async (userId: string, isFocus: boolean) => {
  const { isSuccess } = await $fetch(isFocus ? '/user/cancel' : '/user/focus', {
    autoGotoLogin: true,
    data: { userId },
  });

  if (isSuccess) {
    console.log('success');
  } else {
    console.log('fail');
  }

  refresh();
};

const pathPrefix = '/explore/developer/';
const getRouterPath = (pageNum: number) => `${pathPrefix}${pageNum}`;
</script>

<template>
  <section class="page-explore-developer mt-40 min-h-900 container">
    <ul class="mt-20 min-h-100 rounded-4 bg-hex-fff p-20 shadow-[0px_1px_6px_0px_rgba(0,0,0,0.04)]">
      <LoadingBox :loading="pending">
        <template v-if="listing?.records?.length > 0">
          <li v-for="item in listing.records" :key="item.userId" class="relative flex border-b-1 border-hex-f7f7f7 py-20 last:(mb-0 border-b-0 pb-0)">
            <div class="h-52 w-52 flex-shrink-0">
              <img
                class="lozad block h-full w-full border-hex-979797 border-rd-[50%] object-cover"
                :data-src="item.photo"
                :alt="item.nickname"
              >
            </div>
            <div class="ml-24 flex flex-grow basis-0 flex-col justify-between">
              <a :href="item.jump" class="relative flex no-underline" target="_blank">
                <p class="line-clamp-1 mb-10 break-anywhere text-16 color-hex-286AFF font-medium leading-22">{{ item.nickname }} </p>
              </a>
              <p class="line-clamp-1 mb-10 break-anywhere text-14 color-hex-575757 font-normal leading-22">{{ item.profile ? item.profile : $t('home.explore.developer.empty') }}</p>
              <div class="flex">
                <a v-for="(piece, i ) in item.warehouseList" :key="i" :href="piece.jump" target="_blank" class="mr-10 flex-y-center text-left text-12 color-hex-575757 font-400">
                  <div class="i-icons:repository mr-4 size-16"></div>
                  <div class="line-clamp-1 h-16">{{ piece.warehouseName }}</div>
                </a>
              </div>
            </div>
            <div class="w-120 flex justify-end">
              <button
                type="button"
                class="h-28 cursor-pointer border-1 border-hex-345de2 rounded-6 bg-hex-ffffff px-24 text-center text-12 color-hex-345de2 leading-28 hover:(bg-hex-345de2 color-hex-fff)"
                v-if="!item.focusButtonDisabled"
                @click="changeFocus(item.userId, item.isFocus)"
              >
                {{ item.isFocus ? $t('home.common.follow.cancel') : $t('home.common.follow.ok') }}
              </button>
            </div>
          </li>
        </template>
        <template v-else-if="listing?.records?.length === 0">
          <li class="min-h-100 text-center color-hex-8b8b8b">{{ $t('home.common.emptyContent') }}</li>
        </template>
        <template #loading>
          <li class="min-h-100 flex-center">
            <Loading class="size-16 color-hex-8b8b8b" />
          </li>
        </template>
      </LoadingBox>
    </ul>

    <Pagination class="data-[total-pages=gt1]:(mt-20)" :count="listing?.total" :page="Number(props.page) || 1" :page-size="PAGE_SIZE" :get-router-path="getRouterPath" />
  </section>
</template>

<style lang="scss" scoped>
</style>
